<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #v{
            width: 500px;
            height:300px;
        }
    </style>
</head>
<body>
    <div>

        <video id="v" src="d:/funny/mrts.mp4"
        controls  autoplay>
            浏览器不支持
        </video>
        <input type="button" value="播放" id="play">
        <input type="button" value="暂停" id="pause">
        <input type="button" value="信息" id="info">
        <div id="time">

        </div>
    </div>
    <script>
        let playBtn = document.getElementById("play");
        let v = document.getElementById("v");
        let time = document.getElementById("time");
        playBtn.onclick = function(){
            v.play();
        }
        document.getElementById("pause").onclick = function(){
            v.pause();
        }
        document.getElementById("info").onclick = function(){
            console.log(v.volume);
            console.log(v.currentTime);
            console.log(v.duration);
            console.log(v.playbackRate);

            v.playbackRate += 0.5;
            // time.innerHTML = `${parseInt(v.currentTime)}/${parseInt(v.duration)}`;
        }
        v.ontimeupdate = function(){
            // time.innerHTML = `${parseInt(v.currentTime)}/${parseInt(v.duration)}`;
            time.innerHTML = getTime(v.currentTime) + "/" + getTime(v.duration);
        }
        function getTime(druation){
            druation = parseInt(druation);
            let hour = parseInt(druation / 3600).toString().padStart(2,"0");
            let minute = parseInt(druation % 3600 / 60).toString().padStart(2,"0");druation % 3600 / 60
            let sec = parseInt(druation % 3600 % 60).toString().padStart(2,"0");druation % 3600 / 60
            return `${hour}:${minute}:${sec}`;

        }
    </script>
</body>
</html>